<template>
  <div class="homeHead">
    <div class="homeHead-left" @click="enterCates">
      <van-icon class="iconfont"
        class-prefix="icon"
        name="leimupinleifenleileibie"
      ></van-icon>
      <span>分类</span>
    </div>
    <div class="homeHead-right"
      @click="enterSearch"
    >
       <van-icon class="iconfont"
        class-prefix="icon"
        name="search"
      ></van-icon>
      <p>搜索商品xxxx</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    enterCates () {
      this.$router.push('/cates')
    },
    enterSearch () {
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="scss" scoped>
.homeHead{
  box-sizing: border-box;
  width:100%;
  height:46px;
  background: #f66;
  color:#fff;
  font-size:12px;
  position: fixed;
  z-index:2;
  left:0;
  top:0;
  display: flex;
  padding-right:10px;
  .homeHead-left{
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .homeHead-right{
    height:30px;
    border-radius:15px;
    align-self: center;
    flex:1;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    .icon-search{
      margin:0px 8px 0 8px;
    }
  }
}
</style>
